<template>
  <div id="writeOffCodePage">
    <c-title :hide="false" text="机主扫码核销"></c-title>

    <div class="write_off_box">
      <van-cell-group>
        <van-field readonly v-if="list.coupon" v-model="list.coupon.coupon_type_name" label="酒券" input-align="right"> </van-field>
        <van-field readonly v-model="list.num" label="核销数量" input-align="right"> </van-field>
        <van-field readonly v-model="list.member_id" label="会员ID" input-align="right"> </van-field>
      </van-cell-group>
      <div class="confirmBtn" @click="sureBtn">确认</div>
    </div>

    <van-popup v-model="showDeliverList" round :close-on-click-overlay="false" position="bottom" :style="{ height: '70%' }">
      <div style="height: 100%; display: flex; flex-direction: column;">
        <van-nav-bar title="选择其中一个" right-text="确定选择" @click-right="selectDeliver" />
        <div class="radio_main" :class="{ activeSelect: item.id == selectDeliverId }" v-for="item in deliverList" :key="item.id" @click.stop="selectDeliverItem(item.id)">
          <div class="title">
            <span class="text">{{ item.deliver_name }}</span>
            <span class="btn1" v-show="item.id == selectDeliverId">已选择</span>
          </div>
          <div class="address">{{ item.full_address }}</div>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
export default {
  data() {
    return {
      selectDeliverId: null,
      showDeliverList: false,
      deliverList: [], //当前账号所属自提点
      list: [],
      deliver_count: false
    };
  },
  activated() {
    this.getDeliverList();
  },
  methods: {
    async sureBtn() {
      let json = {
        code: this.$route.query.code
      };
      if (this.deliver_count == 1) {
        json.id = this.selectDeliverId;
      }
      let { msg, result, data } = await $http.get("plugin.gradevin-stock.frontend.controllers.write-off.write-off", json, ".");
      if (result) {
        this.$router.push(this.fun.getUrl("package_deliver_write_off_index", { Record: true }));
      } else {
        this.$toast(msg);
      }
    },
    selectDeliverItem(id) {
      if (this.selectDeliverId == id) {
        this.selectDeliverId = null;
        return;
      }
      this.selectDeliverId = id;
    },
    async getDeliverList() {
      let { msg, result, data } = await $http.get("plugin.gradevin-stock.frontend.controllers.write-off.write-off-page", { code: this.$route.query.code }, ".");
      if (result) {
        this.list = data;
        this.deliver_count = false;
        if (Number(data.deliver_count) > 1) {
          this.deliver_count = true;
          this.showDeliverList = true;
          this.getData();
        }
      } else {
        this.$toast(msg);
      }
    },
    selectDeliver() {
      if (!this.selectDeliverId) {
        return this.$toast("请选择自提点");
      }
      this.showDeliverList = false;
    },
    async getData() {
      let { msg, result, data } = await $http.get("plugin.package-deliver-write-off.frontend.controllers.write-off.clerk-delivers", {}, ".");
      console.log(data);
      if (result) {
        this.deliverList = data.list;
      } else {
        this.$toast(msg);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.radio_main {
  margin: 0.25rem;
  padding: 0.875rem;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #666;
  font-size: 12px;
  border-radius: 8px;
  border: 1px solid #f5f5f5;

  .title {
    display: flex;
    justify-content: space-between;
    font-size: 1rem;
    flex: 1;
    line-height: 1.25rem;
    margin-bottom: 0.5rem;

    .text {
      color: #333;
      flex: 1;
    }

    .btn1 {
      color: #fff;
      border-radius: 1rem;
      font-size: 12px;
      padding: 0 0.875rem;
      background: #f15353;
    }
  }

  .address {
    line-height: 1rem;
    overflow: hidden; /* 超出部分隐藏 */
    text-overflow: ellipsis; /* 超出部分显示省略号 */
    white-space: nowrap; /* 规定段落中的文本不进行换行 */
  }
}
.write_off_box {
  margin: 1rem 0.65rem;
  overflow: hidden;
  border-radius: 0.5rem;
  padding: 0.5rem 0 1rem 0;
  background: #fff;
  box-sizing: border-box;
  .title_l {
    width: 100%;
    text-align: left;
  }
  .confirmBtn {
    margin: 0 1.5rem;
    background: #f15353;
    border-radius: 0.8rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1rem;
    margin-top: 1rem;
  }
}
</style>
